<template>
  <a-modal v-model="currentLogVisible" width="800px" :footer="null" title="人群包" @cancel="currentLogVisible = false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48" @keyup.enter.native="getLog('parent')">
          <a-col :md="12" :sm="24">
            <a-form-item label="人群包ID">
              <a-input v-model="groupId" placeholder="" allowClear />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item label="人群包名称">
              <a-input v-model="groupName" placeholder="" allowClear />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item label="状态">
              <a-select v-model="states" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode">
                <a-select-option value="">不限</a-select-option>
                <a-select-option value="Y">启用</a-select-option>
                <a-select-option value="N">禁用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
              <a-button type="primary" @click="getLog('parent')">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table bordered :columns="columns" :rowKey="record => record.id" :data-source="logList" :pagination="pagination" :scroll="{ x: true }" @change="handleTableChange">
      <span slot="action" slot-scope="text, record">
        <a @click="pick(record)">选择</a>
      </span>
    </a-table>
  </a-modal>
</template>
<script>
import { peoplesPage } from '@/api/marketingCenter/memberTask'
const columns = [
  {
    title: '人群包ID',
    dataIndex: 'groupId'
  },
  {
    title: '人群包名称',
    dataIndex: 'groupName'
  },
  {
    title: '状态',
    dataIndex: 'states',
    customRender: t => (t == 'Y' ? '启用' : '禁用')
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  props: {
    logVisible: {
      type: Boolean,
      default: false
    },
    //channel-所属渠道(value:integral/member/pos/damo)
    channel: {
      type: String,
      default: '',
      required: false
    }
  },
  data() {
    return {
      columns,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`
        /* itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        } */
      },
      id: '',
      groupName: '',
      groupId: '',
      states: 'Y',
      logList: []
    }
  },
  computed: {
    currentLogVisible: {
      get() {
        return this.logVisible
      },
      set(val) {
        if (!val) this.states = 'Y'
        this.$emit('update:logVisible', val)
      }
    }
  },
  created() {},
  methods: {
    handleTableChange(pagination) {
      this.pagination = pagination
      this.getLog(this.id)
    },
    getLog(parent) {
      if (parent) {
        this.pagination.current = 1
      }
      this.logList = []
      const { current, pageSize } = this.pagination
      const data = {
        groupName: this.groupName,
        groupId: this.groupId,
        channel: this.channel,
        states: this.states,
        current: current,
        size: pageSize
      }
      peoplesPage(data).then(res => {
        if (res.code == 200) {
          const { records, total } = res.data
          this.logList = records || []
          this.pagination.total = total || 0
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    resetList() {
      this.groupName = ''
      this.groupId = ''
      this.states = 'Y'
      this.getLog('parent')
    },
    pick(record) {
      this.$emit('updatePeople', record)
    }
  }
}
</script>
<style lang="less" scoped></style>

